<template>
  <div class="app-container">
    <header class="app-header">
      <el-form inline label-width="140px">
        <el-form-item label="订单编号：" prop="orderCode">
          <el-input
            v-model.trim="query.orderCode"
            clearable
            @clear="selected"
          />
        </el-form-item>
        <el-form-item label="外协厂商：" prop="manufacturer">
          <el-input
            v-model.trim="query.manufacturer"
            clearable
            @clear="selected"
          />
        </el-form-item>

        <!-- <el-form-item label="外协派单时间：">
          <el-date-picker
            v-model="valueDtStart"
            type="daterange"
            value-format="yyyyMMdd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDtStart"
          />
        </el-form-item> -->
        <el-form-item label="外协计划完成时间：">
          <el-date-picker
            v-model="valueTimeStart"
            type="date"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTimeStart"/>
        </el-form-item>
      </el-form>

      <div class="establish" margin-bottom="20px">
        <el-button plain size="small"  v-if="department && department !== '5'" @click="createContract">生成合同</el-button>
        <el-button
          type="primary"
          size="small"
          @click="selected"
        >查询</el-button
        >
        <el-button plain size="small" @click="reset">重置</el-button>
      </div>
    </header>

    <el-table
      :data="list"
      :header-row-style="{
        'background-color': '#E6E6E6',
        'font-weight': 'bold',
        color: '#333'
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      height="650"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        align="center"
        prop="orderCode"
        label="订单号"
      />
      <el-table-column
        align="center"
        prop="picCode"
        label="图号"
      />
      <el-table-column
        align="center"
        prop="picName"
        label="名称"
      />
      <el-table-column
        align="center"
        prop="amount"
        label="数量"
      />
      <el-table-column
        align="center"
        prop="price"
        label="总价"
      />
      <el-table-column
        align="center"
        prop="unitPrice"
        label="单价"
      />
      <el-table-column
        align="center"
        prop="manufacturer"
        label="外协厂商"
      />
      <el-table-column
        align="center"
        prop="manufacturerPlanTime"
        label="外协计划完成时间"
      />
      <el-table-column
        align="center"
        prop="createDt"
        label="外协派单时间"
      />
      <el-table-column
        align="center"
        prop="arriveTime"
        label="收货日期"
      />
      <el-table-column
        align="center"
        prop="arriveAmount"
        label="累计完成数量"
      />
      <el-table-column
        align="center"
        prop="total"
        label="累计收货数量"
      />
      <el-table-column
        align="center"
        prop="qualifiedAmount"
        label="合格数量"
      />
      <el-table-column
        align="center"
        prop="unqualifiedAmount"
        label="不合格数量"
      />
      <el-table-column align="center" label="状态" prop="statusText" />
      <el-table-column
        align="center"
        prop="remark"
        label="备注"
      />
      <el-table-column
        align="center"
        prop="examineRemark"
        label="品检备注"
      />
      <el-table-column
        align="center"
        prop="rate"
        label="税率"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.rate">{{ scope.row.rate }}%</span>
          <span v-if="!scope.row.rate">{{ scope.row.rate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        width="100"
        align="center"
        prop="cal"
        label="操作"
      >
        <template slot-scope="scope">
       <el-button
            v-if="department && department != 5"
            type="text"
            size="mini"
            @click="editList(scope.row)"
          >编辑</el-button
          >
          <el-button
            v-if="department && department == 5"
            type="text"
            size="mini"
            @click="clickStatus(scope.row)"
          >完成</el-button
          >
          <el-button
            v-if="department && department != 5 && scope.row.status == 24"
            type="text"
            size="mini"
            @click="arrivalClick(scope.row)"
          >确认到货</el-button
          >
          <!-- <el-button
            v-if="department && department != 5 && (scope.row.status == 23 || scope.row.status == 25)"
            type="text"
            size="mini"
            @click="inspectionClick(scope.row)"
          >品检</el-button
          > -->
          <el-button
            type="text"
            size="mini"
            @click="seePaper(scope.row)"
          >查看图纸</el-button
          >

          <el-button
            v-if="scope.row.contractUrl"
            type="text"
            size="mini"
            @click="seeContract(scope.row)"
          >查看合同</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="query.page"
      :total="total"
      :page-size="query.limit"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
    <el-dialog :visible.sync="dialog" @close="closeDialog">
      <el-form
        ref="inspection"
        :model="inspection"
        :rules="validateRules"
        label-width="120px"
      >
        <!-- <el-form-item label="批次数量：" prop="total">
          <el-col :span="8">
            <el-input
              v-model="inspection.total"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入批次数量"
            />
          </el-col>
        </el-form-item> -->

        <el-form-item label="合格数量：" prop="qualifiedAmount">
          <el-col :span="8">
            <el-input
              v-model="inspection.qualifiedAmount"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入合格数量"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="检验时间：" prop="qualifiedTime">
          <el-col :span="6">
            <el-date-picker
              v-model="inspection.qualifiedTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择检验时间："
            />
          </el-col>
        </el-form-item>
        <el-form-item label="检验员：" prop="examineId">
          <el-select v-model="inspection.examineId" clearable placeholder="检验员">
            <el-option
              v-for="item in listUserP"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showClick('inspection')"
        >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogArrival" @close="closeDialogArrival">
      <el-form
        ref="arrival"
        :model="arrival"
        :rules="validateArrival"
        label-width="120px"
      >
        <el-form-item label="到货数量：" prop="total">
          <el-col :span="8">
            <el-input
              v-model="arrival.total"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入到货数量"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="到货时间：" prop="arriveTime">
          <el-col :span="6">
            <el-date-picker
              v-model="arrival.arriveTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择到货时间："
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showArrivalClick('arrival')"
        >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="pdfUrlShow"
      title="图纸路径"
      @close="pdfUrlShow = false"
    >
      <el-form label-width="120px">
        <el-form-item label="图纸路径：">
          <div>
            <el-button
              v-for="(url, index) in pdfUrl"
              :key="index"
              style="text-align: left;"
              type="text"
            >
              <a :href="url" style="white-space: initial;" target="_blank">{{
                url
              }}</a>
            </el-button>
          </div>
        </el-form-item>
        <el-form-item
          label="工艺："
        >
          <div v-for="(item, index) in artFiles" :key="index">
            <a
              :href="item"
              style="
								color: #409eff;
								border-bottom: #409eff 1px solid;
							"
              target="_blank"
            >{{ item }}</a
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogEdit" @close="closeDialogEdit">
      <el-form
        ref="editValue"
        :model="editValue"
        :rules="validateEditValue"
        label-width="120px"
      >

        <el-form-item label="图号名称：" prop="picName">
          <el-input
            v-model="editValue.picName"
            size="small"
            placeholder="请输入图号名称"
          />
        </el-form-item>
        <el-form-item label="单价：" prop="unitPrice">
          <el-input
            v-model="editValue.unitPrice"
            size="small"
            type="number"
            on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
            placeholder="请输入单价"
          />
        </el-form-item>
        <el-form-item label="到货税率：" prop="rate">
          <el-input
            v-model="editValue.rate"
            size="small"
            type="number"
            placeholder="请输入税率"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            v-model="editValue.remark"
            autosize
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showEditClick"
        >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="填完成数量"
      :visible.sync="completedQuantityShow"
      width="30%"
      center>
      <el-form ref="form"  :modal="user" label-width="80px">
        <el-form-item label="完成数量">
          <el-input-number v-model="user.arriveAmount" :step="1" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    <el-button @click="completedQuantityShow = false">取 消</el-button>
    <el-button type="primary" @click="completedQuantityMethod">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import user from '../../api/acl/user.js'

export default {
  name: 'PmList',

  data() {
    return {
      user:{
        arriveAmount:0,
        id:null
      },
      completedQuantityShow:false,
      createContractList: [],
      dialogEdit: false,
      validateEditValue: {},
      editValue: {
        amount: '',
        id: '',
        productId: '',
        remark: '',
        unitPrice: '',
        rate: ''
      },
      valueTimeStart: '',
      valueDtStart: '',
      arrival: {
        total: '',
        arriveTime: '',
        id: '',
        productId: '',
        assistId: ''
      },
      dialogArrival: false,
      listUserP: [],
      validateArrival: {

      },
      validateRules: {
        // total: [
        //   { required: true, trigger: 'change', message: '请输入批次数量' }
        // ],
        // qualifiedAmount: [
        //   { required: true, trigger: 'change', message: '请输入合格数量' }
        // ]
      },
      dialog: false,
      inspection: {
        examineId: '',
        qualifiedTime: '',
        total: '',
        qualifiedAmount: '',
        id: ''
      },
      query: {
        createDtStart: '',
        createDtEnd: '',
        manufacturerPlanTimeStart: '',
        manufacturerPlanTimeEnd: '',
        orderCode: '',
        manufacturer: '',
        page: 1,
        limit: 10
      },
      list: [],
      total: 1,
      pdfUrl: '',
      pdfUrlShow: false,
      artFiles: []
    }
  },

  computed: {
    department() {
      return window.sessionStorage.getItem('department')
    }
  },

  created() {
    this.getList()
  },

  methods: {
    completedQuantityMethod(){
      user
        .fullAssistupdate({
          id: this.user.id,
          status: '24',
          arriveAmount:this.user.arriveAmount
        })
        .then(response => {
          this.$message({
            message: '已完成',
            duration: 1000
          })
          this.getList()
          this.completedQuantityShow = false
        })
    },
    createContract() {
      if (this.createContractList.length > 0) {
        const list = []
        this.createContractList.map((item) => {
          list.push(item.id)
        })
        console.log(list)
        user.assistCreateContract(
          list
        ).then((response) => {
          this.$message({
            message: '合同生成成功',
            duration: 1000
          })
          this.getList()
        })
      } else {
        this.$message({
          message: '请先选择需要生成合同的外协',
          duration: 1000
        })
      }
    },
    handleSelectionChange(val) {
      this.createContractList = val
      console.log(val)
    },
    seeContract(row) {
      window.open(row.contractUrl, '_blank')
    },
    showEditClick() {
      user.editAssistInfo({
        amount: this.editValue.amount,
        id: this.editValue.id,
        picName: this.editValue.picName,
        productId: this.editValue.productId,
        remark: this.editValue.remark,
        unitPrice: this.editValue.unitPrice,
        rate: this.editValue.rate
      }).then((response) => {
        this.dialogEdit = false
        this.$message({
          message: '编辑完成',
          duration: 1000
        })
        this.getList()
      })
    },
    closeDialogEdit() {
      this.editValue.amount = ''
      this.editValue.id = ''
      this.editValue.productId = ''
      this.editValue.remark = ''
      this.editValue.unitPrice = ''
      this.editValue.rate = ''
    },
    editList(val) {
      console.log(val)
      this.dialogEdit = true
      this.editValue.amount = val.amount
      this.editValue.id = val.id
      this.editValue.productId = val.productId
      this.editValue.remark = ''
      this.editValue.unitPrice = ''
      this.editValue.rate = ''
      this.editValue.picName = val.picName
    },
    changeTimeStart(val) {
      console.log(val)
      this.query.manufacturerPlanTimeStart = val.length > 0 ? val[0] : ''
      this.query.manufacturerPlanTimeEnd = val.length > 0 ? val[1] : ''
    },
    changeDtStart(val) {
      console.log(val)
      this.query.createDtStart = val.length > 0 ? val[0] : ''
      this.query.createDtEnd = val.length > 0 ? val[1] : ''
    },
    listUser() {
      user.listUser({
        department: '8',
        limit: 10000,
        page: 1
      }).then((response) => {
        console.log(response)
        this.listUserP = []
        for (let i = 0; i < response.list.length; i++) {
          const obj = {}
          if (
            response.list[i].fullName != '' &&
							response.list[i].fullName != null &&
							response.list[i].fullName != undefined
          ) {
            obj.value = response.list[i].id
            obj.label = response.list[i].fullName

            this.listUserP.push(obj)
          }
        }
      })
    },
    seePaper(row) {
      user.listImageFolder(row).then(response => {
        this.pdfUrl =
                typeof response.imageUrl === 'string'
                  ? [response.imageUrl]
                  : response.imageUrl || []
        this.pdfUrlShow = true
        if (response && response.imageUrl) {
          this.artFiles = response.artFiles
        }
      })
    },
    closeDialogArrival() {
      this.arrival = {
        id: '',
        total: '',
        arriveTime: '',
        productId: '',
        assistId: ''
      }
      this.$refs.arrival.resetFields()
    },
    showArrivalClick(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          user
            .assistArrive({
              id: this.arrival.id,
              total: this.arrival.total,
              arriveTime: this.arrival.arriveTime,
              status: 25,
              productId: this.arrival.productId,
              assistId: this.arrival.assistId
            })
            .then(response => {
              this.dialogArrival = false
              this.$message({
                message: '确认完成',
                duration: 1000
              })
              this.getList()
            })
        }
      })
    },
    closeDialog() {
      this.inspection = {
        examineId: '',
        qualifiedTime: '',
        total: '',
        qualifiedAmount: '',
        id: ''
      }
      this.$refs.inspection.resetFields()
    },
    showClick(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          user
            .assistCheck({
              id: this.inspection.id,
              examineId: this.inspection.examineId,
              qualifiedTime: this.inspection.qualifiedTime,
              // total: this.inspection.total,
              qualifiedAmount: this.inspection.qualifiedAmount
            })
            .then(response => {
              this.dialog = false
              this.$message({
                message: '品检完成',
                duration: 1000
              })
              this.getList()
            })
        }
      })
    },
    arrivalClick(row) {
      this.dialogArrival = true
      this.arrival.id = row.id
      this.arrival.total = ''
      this.arrival.arriveTime = ''
      this.arrival.productId = row.productId
      this.arrival.assistId = row.assistId
    },
    inspectionClick(row) {
      this.listUser()
      this.dialog = true
      this.inspection.id = row.id
      this.inspection.total = ''
      this.inspection.qualifiedAmount = ''
      this.inspection.examineId = ''
      this.inspection.qualifiedTime = ''
    },
    clickStatus(row) {
      this.user.id = row.id
      this.user.arriveAmount = 0
      this.completedQuantityShow = true
    },
    reset() {
      this.query = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    selected() {
      this.getList()
    },
    fetchData(val) {
      this.query.page = val
      this.getList()
    },
    getList() {
      user.fullAssistList(this.query).then(response => {
        this.total = response.total
        for (let i = 0; i < response.list.length; i++) {
          if (response.list[i].status == 22) {
            response.list[i].statusText = '已外协'
          } else if (response.list[i].status == 23) {
            response.list[i].statusText = '已派单-已外协'
          } else if (response.list[i].status == 24) {
            response.list[i].statusText = '供应商竣工'
          } else if (response.list[i].status == 25) {
            response.list[i].statusText = '已收货'
          } else if (response.list[i].status == 26) {
            response.list[i].statusText = '合格'
          } else if (response.list[i].status == 27) {
            response.list[i].statusText = '不合格'
          }  else if (response.list[i].status == 43) {
            response.list[i].statusText = '合格'
          } else if (response.list[i].status == 44) {
            response.list[i].statusText = '不合格'
          } else if (response.list[i].status == 6) {
            response.list[i].statusText = '入库中'
          } else if (response.list[i].status == 7) {
            response.list[i].statusText = '出库中'
          }
        }
        this.list = response.list
        console.log(this.list)
      })
    }
  }
}
</script>

<style>
.establish {
  text-align: right;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
